import React ,{useState} from 'react';
//引入局部样式
import style from './Login.module.scss'
//按需引入 vat 的组件
import {  notification } from 'antd';
import type { NotificationPlacement } from 'antd/lib/notification';
//引入md5 加密算法

import {loginAction} from '../../store/reducer/asyncAction'
import {useDispatch} from "react-redux";
import {useNavigate } from "react-router-dom";

//定义弹窗失败提示的一些内容
const openNotification = (placement: NotificationPlacement) => {
    notification.info({
        message: `登陆失败`,
        description:
            '账号或密码错误',
        placement,
        duration: 1,
    });
};
//定义弹窗成功提示的一些内容
type NotificationType = 'success' | 'info' | 'warning' | 'error';
const openNotificationWithIcon = (type: NotificationType) => {
    notification[type]({
        message: '登陆成功',
        duration: 1,
    });
};
function Login(){
    const dispatch = useDispatch()
    const navigate = useNavigate()

    //数据初始化模板
    const inituser = {
        username:localStorage.getItem('username')||'',
        nameShow:false,
        password:'',
        passShow:false,
        state:false,
    }
    //输入框绑定数据
    const [userInput,setUserInput] = useState(inituser)
    //检测输入框的输入事件
    const changeInput = (e)=>{

        setUserInput({
            ...userInput,[e.target.name]:e.target.value,nameShow:false,passShow:false,
        })
    }
    //检测多选框框的输入事件
    const remberHanlder = ()=>{

        setUserInput({
            ...userInput, state:!userInput.state
        })
    }

    //登录提交
    const submitHanlder = () => {
        //判断账号是否输入
        if(userInput.username==''){
            return  setUserInput({
                ...userInput, nameShow:true
            })
        }
        //判断密码是否输入
        if(userInput.password==''){
            return  setUserInput({
                ...userInput, passShow:true
            })
        }
        dispatch(loginAction(userInput))
            .then((res)=>{
                if(res.data.code ==200){
                    //判断是否记住密码
                    if(userInput.state){
                        localStorage.setItem('username',userInput.username)
                    }else {
                        localStorage.setItem('username','')
                    }
                    sessionStorage.setItem('username',userInput.username)
                    openNotificationWithIcon('success')
                    navigate('/')
                }else{
                    openNotification('top')
                }
            })
            .catch(err=>{
                console.log('账号密码错误',err)
            })
    };
    const registerHanlder =()=>{
        navigate('/register')
    }

    return (
        <div className={style.box}>
                <div className={style.title}>廖氏美业门店管理系统</div>
                <div className={style.context}>
                    <div className={style.text}>登录</div>
                    <div className={style.from}>
                       <div className={style.input_box}>
                           <input placeholder='账号' value={userInput.username} name="username" onChange={(e)=>changeInput(e)}/>
                           <div className={style.alert}><div style={{display:userInput.nameShow?'block':"none"}}>*请输入账号</div></div>
                       </div>
                        <div className={style.input_box}>
                            <input placeholder='密码' type="password" name="password"   value={userInput.password}  onChange={(e)=>changeInput(e)}/>
                            <div className={style.alert}><div  style={{display:userInput.passShow?'block':"none"}}>*请输入密码</div></div>
                        </div>
                        <div className={style.remenber}>
                            <div className={style.check}  onClick={remberHanlder}>
                                <div className={style.check_box} style={{backgroundColor:userInput.state?'#169bd5':''}} />
                                <div>记住账号</div>
                            </div>
                            <div className={style.findpass}>找回密码</div>
                        </div>
                        <div className={style.login_btn} onClick={submitHanlder}>登录</div>
                        <div className={style.register} onClick={registerHanlder}>还没有账号？立即入驻</div>
                    </div>
            </div>

        </div>
    );
}

export default Login;